<%@page contentType="text/html;charset=UTF-8"%>
<%@include file="../common.jsp"%>
<!DOCTYPE html>
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Application List</title>
	<link href="${ctx}/resources/css/bootstrap/bootstrap.min.css" rel="stylesheet">
	<link href="${ctx}/resources/css/bootstrap/dashboard.css" rel="stylesheet">
	<link href="${ctx}/resources/css/bootstrap/bootstrap-treeview.min.css" rel="stylesheet">
	<link href="${ctx}/resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
	<script src="${ctx}/resources/js/monitor/xl-monitor.js"></script>
	<style type="text/css">
		
	</style>	
	
  </head>

  <body style="padding-top:10px; overflow-x:hidden">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar" style="top:1px; width:13%; padding:1px;">
          <div id="tree"></div>
        </div>
        <!-- -->
		<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" style="width:87%; margin-left:13.5%;">
          <h2 class="sub-header" style="border-bottom:#FFFFFF"><i class="fa fa-cloud"> Service 列表</i></h2>
          <div class="table-responsive">
			<table class="table table-striped table-hover">
				<thead>
				<tr>
					<th>#序号</th>
					<th>Name</th>
					<th>Labels</th>
					<th>Namespaces</th>			
					<th>clusterIP</th>
					<th>selector</th>
					<th>StartTime</th>
					<th>Opt</th>
				</tr>
				</thead>
				<tbody>
				<c:forEach items="${services.items}" var="service" varStatus="serviceStatus">
					<tr>
						<td>${serviceStatus.index + 1}</td>
						<td><span><a href="${ctx}/service/viewService?namespace=${service.metadata.namespace}&name=${service.metadata.name}">${service.metadata.name}</a></span></td>
						<td>${service.metadata.labels}</td>
						<td>${service.metadata.namespace}&nbsp;</td>		
						<td>${service.spec.clusterIP}&nbsp;</td>
						<td>${service.spec.selector}&nbsp;</td>
						<td>${service.metadata.creationTimestamp}&nbsp;</td>
						<td><a href="${ctx}/service/del?namespace=${service.metadata.namespace}&name=${service.metadata.name}">Del</a></td>
					</tr>
				</c:forEach>
				</tbody>
			</table>            
          </div>
        </div>
      </div>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="${ctx}/resources/js/jquery/jquery-1.12.0.min.js"></script>
    <script src="${ctx}/resources/js/bootstrap/bootstrap.min.js"></script>
	<script src="${ctx}/resources/js/bootstrap/bootstrap-treeview.min.js"></script>
    <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
    <script src="${ctx}/resources/js/bootstrap/holder.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="${ctx}/resources/js/bootstrap/ie10-viewport-bug-workaround.js"></script>
	<script language="javascript">
		$(function(){
			$.getJSON(ctx+'/k8/viewTree?type=${type}',function (data){
				$('#tree').treeview(
									{
										data: data,levels:5,expandIcon : 'fa fa-plus-square', collapseIcon : 'fa fa-minus-square',
										onNodeSelected:function(event, data) {
											self.location.href=ctx+data.href;
										}
									});
			});	
		});
	</script>
  </body>
</html>
